<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 从父组件传值到子组件 -->
				
				<!-- 循环传值组件 -->
				
				<!-- 
				 因为父元素的方法可以直接修改父元素的数据
				 所以将父元素的方法传递给子元素，
				 然后由子元素进行调用，从而修改父元素的数据
				 -->
				<school v-for="item,index in schoolList" :key="'abc'+index" :index='index' :school-name="item"></school>
				
			</ul>
			
			<h2>选中的学校是：{{chooseSchool}}</h2>
			
			
		</div>
		
		<script type="text/javascript">
			//产品组件
			Vue.component("school",{
				props:['schoolName','index','action'],
				template:`<li>
							
							<h3>{{index}}-学校名称：{{schoolName}}</h3>
							<button @click="chooseEvent(schoolName)">选择学校</button>
							
						</li>`,
				methods:{
					chooseEvent:function(schoolName){
						console.log(schoolName)
						console.log(this)
						//组件可以通过$parent属性找到父元素的vue对象
						this.$parent.changeEvent(schoolName)
					}
				}
				
			})
			
			
			//根组件
			let app = new Vue({
				el:"#app",
				data:{
					schoolList:['清华','北大','浙大',"中大"],
					chooseSchool:""
				},
				methods:{
					changeEvent:function(data){
						//console.log("触发学校选择事件")
						console.log(this)
						this.chooseSchool = data
					}
				}
			})
			
			
		</script>
	</body>
</html>
